navbar CSS main
code:style.css
body {
--project-home-width: calc(var(--project-title-width) + var(--project-home-padding) * 2);
--container-max-width: calc(2 * (var(--kamon-width) + var(--project-home-width) + var(--circle-icon-width) * 2) + var(--search-form-width-max) + var(--circle-icon-width) + 28px);
}
/*.app { display: flex; flex-direction: column; justify-content: center; }*/
.app > .navbar > .row {
margin: auto;
max-width: var(--container-max-width);
}
.history-back-button { display: none !important;}
/*.app>.container {
max-width: var(--container-max-width);
}*/
.project-home {
position: fixed;
top: 0;
z-index: 1000;
text-align: left;
display: flex !important;
padding: 0 var(--project-home-padding) !important;
width: auto;
min-width: var(--project-home-width) !important;
margin-left: 0;
left: calc(var(--circle-icon-width) + var(--kamon-width) + var(--project-home-margin) + 12px + var(--container-padding) );
justify-content: center;
align-items: center;
}
.navbar-form {
margin: 0 !important;
display: flex;
background-color: transparent;
border: none;
border-image-width: 0px;
box-shadow: none;
}
.hidden-xs>.navbar-form {
padding: 0 var(--navbar-form-padding) !important;
align-items: center;
}
.quick-launch .new-button {
display: none;
}
.navbar .row {
--col-brand-base: calc(var(--project-home-width) + var(--circle-icon-width) + var(--kamon-width) /*+ var(--project-home-padding) * 2*/ + var(--project-home-margin) * 2 + var(--container-padding));
--search-collapse-toggle: calc(var(--search-form-min-width) + var(--col-brand-base) * 2 + var(--circle-icon-width) * 2 + var(--navbar-form-padding) * 2 + 40);
/* 他が既定値なら search-form-min-width + project-title-width*2 + project-home-padding*8 + project-home-margin*4 + 264px =: x, if x < 767 then x - 20 else x; @media境界にCSS変数は使えないので、計算した値を該当箇所に入れてください */
}
.navbar .row .col-brand {
flex: 0 1 var(--col-brand-base);
width: auto !important;
max-width: none !important;
padding-left: var(--container-padding);
padding-right: 0;
}
.navbar .row .col-search {
width: auto !important;
flex: 1;
}
.navbar .row .col-menu {
flex: 0 1 calc(var(--col-brand-base) + var(--circle-icon-width));
padding-right: var(--container-padding);
margin-left: 0;
display: block !important;
width: auto !important;
}
.navbar .navbar-menu>.stream-btn {
display: block;
}
.mobile-search-toggle {
padding: 0 var(--navbar-form-padding) !important;
}
.mobile-search-toggle i {
margin-top: calc((var(--navbar-height) - 24px) / 2);
}
@media screen and (max-width: 767px) {
.expandable-menu {
top: var(--navbar-height);
max-width: 100%;
}
}
@media screen and (max-width: 800px /*var(--search-collapse-toggle)*/) {
a.new-button {
margin-right: 0 !important;
}
a.project-home {
min-width: calc(100% - var(--container-padding) * 2 - var(--history-back-width) - var(--kamon-width) * 2 - var(--circle-icon-width) - (var(--circle-icon-width) * 2 + var(--navbar-form-padding) * 2) - (var(--circle-icon-width) * 2 + 4px + 10px) - var(--project-home-padding) * 2 - var(--project-home-margin) * 2) !important;
}
.navbar .row .hidden-xs {
display: block !important;
flex: 0 1 calc(var(--circle-icon-width) + var(--search-form-padding)) !important;
}
.hidden-xs .navbar-form .search-form {
display: none !important;
}
.col-brand {
flex-grow: 1 !important;
}
.col-menu {
flex: 0 1 calc(var(--circle-icon-width) + var(--navbar-form-padding) * 2 + 24px) !important;
}
.hidden-xs>.navbar-form .search-form .form-group .dropdown-menu {
width: 95vw !important;
float: left;
position: absolute !important;
left: calc(0px - calc(var(--project-home-width) + var(--brand-icon-width) + var(--kamon-width) + var(--project-home-padding) + var(--navbar-form-padding) + var(--circle-icon-width))) !important;
}
.mobile-search-toggle {
display: block !important;
}
.visible-xs .navbar-form {
display: block !important;
}
}
@media screen and (min-width: 767px) and (max-width: 800px /*var(--search-collapse-toggle)*/) {
.project-home {
min-width: calc(100% - var(--history-back-width) - var(--container-padding) * 2 - var(--kamon-width) * 2 - var(--circle-icon-width) - (var(--circle-icon-width) * 2 + var(--navbar-form-padding) * 2) - (var(--circle-icon-width) * 2 + 4px) - var(--project-home-padding) - var(--project-home-margin) * 3) !important;
}
}
@media screen and (min-width: 767px) {
.visible-xs {
display: block !important;
}
}
@media screen and (min-width: 800px /* var(--search-collapse-toggle)*/) {
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
}
@media screen and (min-width: 1468px /*var(--container-max-width)*/) {
.project-home {
left: calc((100vw - 1468px) / 2 - 12px + var(--circle-icon-width) + var(--kamon-width) + var(--project-home-margin) + 12px + var(--container-padding)) !important;
}
}